@import '@wordpress/base-styles/colors';

.marked-lines {
	padding: 0;
	background-color: #f5f5f5;
	font-family: "Courier 10 Pitch", Courier, monospace;
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
}

.marked-lines__marked-line {
	background-color: color-mix(in srgb, $alert-red 20%, transparent);
}

.marked-lines__line-numbers {
	display: flex;
	flex-direction: column;
	text-align: end;
}

.marked-lines__line-number {
	padding: 0 4px;
	background-color: $gray-100;
	color: $gray-700;

	&.marked-lines__marked-line {
		background-color: color-mix(in srgb, $alert-red 15%, transparent);
	}
}

.marked-lines__lines {
	display: flex;
	flex-direction: column;
	white-space: pre;
	overflow-x: visible;
}

.marked-lines__line {
	padding-inline-start: 8px;
}

.marked-lines__mark {
	background-color: $alert-red;
	color: #fff;
	border-radius: 2px;
	padding: 2px 4px;
}
